/**
 * Wires :
 */

canvas.WireIt-Wire {
   position: absolute;
   border: 0;
   z-index: 0;
}

canvas.WireIt-Wire-editing {
   z-index: 10;
}

div.WireIt-Wire-scissors {
   border: 0;
   position: absolute;
   z-index: 5;
   width: 16px;
   height: 16px;
   background-color: transparent;
   background-image: url(../images/cut.png);
   cursor: pointer;
}

/**
 * Terminals :
 */

div.WireIt-Terminal {
   width: 30px;
   height: 30px;
   cursor: pointer;   
   background-image: url(../images/term-blank.png);
   position: absolute;
}

div.WireIt-Terminal-connected {
   background-image: url(../images/term-connected.png);
}

div.WireIt-Terminal-dropinvite {
   background-image: url(../images/term-dropinvite.png);
}

/**
 * Containers
 */
div.WireIt-Container {
   position: absolute;
 	z-index: 5;
 	opacity: 0.8;
 	border: 0; /* When we put a border to the containers, it messes getXY and create a small offset in the wire connections */
 	background-color: #aaffaa;
}

div.WireIt-Container div.body {
   padding: 5px;
}

div.WireIt-Container-ddhandle {
   width: 100%;
   height: 20px;
   background-color: #33ff33;
 	cursor: move;
} 

div.WireIt-Container-resizehandle {
   position: absolute;
   bottom: 0;
   right: 0;
   width: 10px;
   height: 10px;
   cursor: se-resize;
}

div.WireIt-Container-closebutton {
   background-image: url(../images/close.png);
   width: 25px;
   height: 15px;
   position: absolute;
   top: 3px;
   right: 3px;
   cursor: pointer;
}


div.WireIt-Container-focused {
   
}

div.WireIt-Container-focused div.WireIt-Container-ddhandle {
   background-color: blue;
}
 
/**
 * Layers
 */
div.WireIt-Layer {
   border: 0; /* When we put a border to the layer, it messes getXY and create a small offset in the wire connections */
   overflow: scroll;
   margin: auto;
   position: relative;
	height: 100%; 
	width: 100%;
	background-color: #ddddff;
}